<template>
  <view class="main-box">
    <view class="img-container">
      <image
        class="topImg"
        style="height: 510rpx; width: 750rpx"
        model="scaleToFill"
        src="../../../static/images/bgc_01.png"
      ></image>
      <view style="position:absolute;top:30rpx;right:40rpx">
         <image style="width:40rpx;height:40rpx" src="../../../static/images/photo.png" mode="scaleToFill" />
         <text style="color:#F0E5E5;position:relative;top:-6rpx;left:6rpx">{{userName}}</text>
      </view> 
    </view>
    <view class="containerBody">
      <view class="warning-time">
        <view class="switch-Tab">
          <view
            v-for="(item, index) of dateTimeList"
            :key="index"
            :class="{ active: index + 1 === currentIndex }"
            @click="changeActive(item)"
          >
            {{ item.value }}
          </view>
        </view>
      </view>
      <view class="content-card-box">
        <view class="card-left1">
          <cmpSummaryFillCard
            :cardData="documentDailyData"
            style="width: 100%"
          />
        </view>
        <view class="card-right">
          <view style="margin-bottom: 30rpx">
            <cmpSummaryFillCard :cardData="writeDailyData" />
          </view>
          <cmpSummaryFillCard :cardData="editDailyData" style="flex: 1" />
        </view>
      </view>
      <view class="summary-count-box">
        <view style="flex: 1">
          <view style="font-weight: bold; font-size: 36rpx">
            {{ countObj.editNum }}
          </view>
          <view
            style="
              margin: 12rpx 0rpx;
              width: 30rpx;
              height: 5rpx;
              background: #e24141;
              border-radius: 2rpx;
            "
          ></view>
          <view
            style="
              height: 24rpx;
              font-size: 30rpx;
              color: #333;
              line-height: 30rpx;
            "
            >修改日报</view
          >
        </view>
        <view
          style="
            width: 1rpx;
            height: 90rpx;
            background: #e2a1a1;
            border-radius: 1rpx;
          "
        ></view>
        <view style="flex: 1">
          <view style="font-weight: bold; font-size: 36rpx">{{
            countObj.exportNum
          }}</view>
          <view
            style="
              margin: 12rpx 0rpx;
              width: 30rpx;
              height: 5rpx;
              background: #e24141;
              border-radius: 2rpx;
            "
          ></view>
          <view
            style="
              height: 24rpx;
              font-size: 30rpx;
              color: #333;
              line-height: 30rpx;
            "
            >导出汇总</view
          >
        </view>
      </view>
      <view style="width: 100%; box-sizing: border-box; height: 126rpx">
        <image
          class="bottomImg"
          src="../../../static/images/bannerBom.png"
        ></image>
      </view>
      <u-modal :show="show" width="690rpx" :showConfirmButton="false">
        <view class="slot-container">
          <u--image
            :showLoading="true"
            src="../../../static/images/fawicon.png"
            width="120rpx"
            height="146rpx"
          ></u--image>
          <view class="document-info">确认转交给文书？</view>
          <view class="document-btn">
            <u-button
              @click="handleClose"
              :customStyle="{
                boxShadow: 'none !important',
                width: '280rpx',
                height: '90rpx',
                borderRadius: '10rpx',
                color: '#0C347E',
                border: '1px solid #0C347E',
                background: '#F5F5F5',
                fontSize: '36rpx',
                borderRadius: '45rpx',
                fontWeight: 400,
                color: '#0C347E',
                marginRight: '50rpx',
              }"
              >取消</u-button
            >
            <u-button
              @click="handleSubmit"
              :customStyle="{
                boxShadow: 'none !important',
                width: '280rpx',
                borderRadius: '10rpx',
                height: '90rpx',
                color: '#FFFFFF',
                fontSize: '36rpx',
                border: '1px solid #0C347E',
                background: '#0C347E',
                borderRadius: '45rpx',
              }"
              >转发</u-button
            >
          </view>
          <u-notify message="Hi uView" :show="notifyShow"></u-notify>
        </view>
      </u-modal>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
     
  </view>
</template>
<script>
import cmpSummaryFillCard from '../../../components/cmp-summary-fill-card.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import { getSummaryData } from '@/service/services.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      currentIndex: 2,
      isActive: true,
      countObj: {
        receivedCount: 200,
        submitCount: 100,
        autoCount: 30,
        editNum: 0,
        exportNum: 0,
      },
      summaryData: {
        automatic: 0,
        manualNum: 0,
        submitNum: 0,
      },
      dateTimeList: [
        {
          id: 1,
          value: '周',
        },
        {
          id: 2,
          value: '月',
        },
        {
          id: 3,
          value: '年',
        },
      ],
      show: false,
      notifyShow: false,
      documentDailyData: {
        title: '收到日报',
        info: '份',
        count: 0,
        progress: 50,
        height: '410rpx',
        imgSrc: '../../../static/images/daily_view.png',
      },
      writeDailyData: {
        title: '手动填报',
        info: '份',
        progress: 30,
        count: 0,
        height: '190rpx',
        imgSrc: '../../../static/images/submit_b.png',
      },
      editDailyData: {
        title: '自动填报',
        info: '份',
        progress: 60,
        height: '190rpx',
        count: 0,
        imgSrc: '../../../static/images/submit_a.png',
      },
      userName:''
    }
  },
  onShow() {
    this.getData({
     // userId: this.userInfo.userId,
      type: 2,
    })
    uni.hideTabBar({
      animation: false,
    })
    this.changeActive({id:2})
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  mounted(){
    this.userName=this.$store.state.userInfo.userName 
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  methods: {
    getData(item) {
      getSummaryData(item).then((res) => {      
        this.summaryData = {
          automatic: res.data.automatic,
          manualNum: res.data.manualNum,
          submitNum: res.data.submitNum,
        }
        this.countObj.editNum = res.data.editNum || 0
        this.countObj.exportNum = res.data.exportNum || 0
        this.documentDailyData.count = res.data.submitNum || 0
        this.editDailyData.count = res.data.automatic || 0
        this.writeDailyData.count = res.data. manualNum || 0
      })
    },
    changeActive(item) {   
      this.currentIndex = item.id
      this.getData({
        type: item.id,
      })
    },
    handleClose() {
      this.show = false
    },
    handleSubmit() {
      this.show = false
      this.notifyShow = true
    },
    handleForwardDocument() {
      this.show = true
    },
    handleEditDaily() {
      uni.navigateTo({
        url: '/pagesA/leader-daily/daily-edit-home/edit-form',
      })
    },
    handleWriteDaily() {
      uni.navigateTo({
        url: '/pagesA/leader-daily/daily-edit-home/write-form',
      })
    },
  },
  components: {
    cmpSummaryFillCard,
    cmpTabBar,
  },
}
</script>

<style lang="scss" scoped>
.content-card-box {
  display: flex;
  .card-left1 {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
    margin: 0rpx 32rpx 0px 32rpx;
  }
  .card-right {
    margin: 0rpx 32rpx 0rpx 0rpx;
    flex: 1;
    // justify-content: space-between;
    position: relative;
  }
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  .slot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.document-info {
  margin-top: 24rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #383839;
  line-height: 30rpx;
}
.document-btn {
  display: flex;
  margin: 75rpx 0rpx 20rpx 0rpx;
}
.img-container {
  width: 100%;
}
.topImg {
  position: fixed;
}
.containerBody {
  .warning-time {
    height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .switch-Tab {
      display: flex;
      width: 420rpx;
      height: 50rpx;
      background: #fff;
      border: 1rpx solid #CFD5DE;
      border-radius: 10rpx;
	  color: #606C81;
      & > view {
        flex: 1;
        line-height: 50rpx;
        text-align: center;
      }
    }
  }
  .time {
    font-size: 48rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
  margin: 460rpx 24rpx 160rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  width: 100%;
  bottom: -6rpx;
}
.summary-count-box {
  height: 190rpx;
  box-sizing: border-box;
  background: #fff1f1;
  border-radius: 5px;
  box-shadow: 0px 1px 3px 0px #b29494;
  margin: 32rpx;
  display: flex;
  align-items: center;
  & > view {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.active {
  background: #2B4FA3;
  color: #FFFFFF;
}
</style>
